
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/jquery.js"></script>
    <style type="text/css">
        @import url(/css/Nevagation.css);
        @import url(/css/ProfileStyle.css);
        .div1{
            border:none;
            border-radius:20px;
            background-color:white;
        }

        .bt1{
            background:url(/image/plus.png);
            background-repeat:no-repeat;
            background-size:30px 30px;
            padding:10px;
            width:30px;
            height:30px;
            border:none;
        }

        .bt1:hover{
            background:url(/image/plus-hover.png);
            background-repeat:no-repeat;
            background-size:30px 30px;
            padding:10px;
            width:30px;
            height:30px;
            border:none;
        }

        .bt2{
            background:url(/image/delete.png);
            background-repeat:no-repeat;
            background-size:30px 30px;
            padding:10px;
            width:30px;
            height:30px;
            border:none;
        }

        .bt2:hover{
            background:url(/image/delete-hover.ico);
            background-repeat:no-repeat;
            background-size:30px 30px;
            padding:10px;
            width:30px;
            height:30px;
            border:none;
        }

        label{
            margin-right:100px;
            font-family:QS-M;
            font-size:30px;
        }

        .file {
            float: left;
            position: relative;
            width: 270px;
            height: 40px;
            padding:5px;
        }

        .file input {
            position: absolute;
            left: 3px;
            top: 3px;
            display: none;
        }

        .fileName {
            position: absolute;
            margin-left:10px;
            bottom: 12px;
            width: 160px;
            font: 20px QS-M;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .fileShow {
            border: none;
            background-color: lightblue;
        }

        .fileShow input {
            display: block;
        }

        .fileClick{
            background-color:rgba(157,157,157,.35);
        }

        .bt{
            cursor:pointer;
            background:url(/image/Folder.ico);
            background-repeat: no-repeat;
            background-size:35px 35px;
            margin-left:5px;
            height:35px;
            width:35px;
            border:none;
        }

        .btchosen{
            background:url(/image/folderb.png);
            background-repeat: no-repeat;
            background-size:35px 35px;
            margin-left:5px;
            height:35px;
            width:35px;
            border:none;
        }
        .loading-bar {
            width:150px;
            height:110px;
            border-radius:8px;
            background-color:#707070;
            opacity:0.8;
            position:absolute;
            left:0;
            right:0;
            top:150px;
            bottom:0;
            margin: auto;
            text-align: center;
        }
        @keyframes loading{
            0% {
                transform:rotate(0deg)
            }
            100%{
                transform:rotate(360deg)
            }
        }
        .loading-icon {
            animation:loading linear 1s infinite;
        }
    </style>
    <style>
        .file-content {
            font-family: QS-B;
            font-size: 20px;
        }
        .file-ico {
            content: '';
            font-size: 0;
            border: 10px solid transparent;
            border-left-color: rgba(157, 157, 157, .35);

        }
        .select-file {
            color: #1758E9;
        }
        .course-file:hover{
            cursor: pointer;
            color: #1758E9;
        }
    </style>
    <meta charset="UTF-8">
    <title>Drive</title>
</head>
<body onload="getAllFile()">
    <ul>
        <li style="margin-right:130px;margin-left:30px;">
            <img src="/image/logo1.png" style="width:100px;height:60px;padding-top:10px;">
        </li>
        <li>
            <a href="/accountInfo">Home</a>
        </li>
        <li>
            <a href="/courseBordTeacher">Course board</a>
        </li>
        <li th:if="${user.role}=='learner'">
            <a href="/timetable">Timetable</a>
        </li>
        <li th:switch="${user.role}">
            <a th:case="'eductor'"  th:href="@{/courseBordTeacher/crades}">GradesMark</a>
            <a th:case="'learner'" href="/grade">MyGrade</a>
        </li>
        <li>
            <a href="/drive" style="color:#004aad">Drive</a>
        </li>
        <li>
            <svg t="1639982246046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8917" width="48" height="48"><path d="M619.064182 504.57971c91.163561-42.401656 154.766046-133.565217 154.766046-239.569358C773.830228 118.724638 655.10559 0 508.819876 0S243.809524 118.724638 243.809524 265.010352c0 106.004141 63.602484 197.167702 154.766045 239.569358C169.606625 555.461698 0 758.989648 0 1002.799172v21.200828h1017.639752v-21.200828c0-243.809524-169.606625-447.337474-398.57557-498.219462z" p-id="8918" fill="#1296db"></path></svg>
        </li>
    </ul>
    <input id="exampleInputFile" type="file" style="display: none">
    <input type="hidden" id="userId" th:value="${user.userId}">
    <input type="hidden" id="courseId" th:value="${courses.get(0).courseId}">
    <input type="hidden" id="uniId" th:value="${courses.get(0).uniId}">
    <input type="hidden" id="courseGroup" th:value="${courses.get(0).courseGroup}">
    <div>
        <div style="height:650px;width:280px;position:fixed;margin-left:30px;" class="div1">

            <div style="margin-left:20px;margin-top:30px;float:left" >
                <img src="/image/home.ico" style="width:50px;height:50px;">
            </div>
            <div style="float:left;font-family:Muli-B;margin-left:10px;margin-top:40px;font-size:30px">MyFile</div>
<!--            <header>-->
<!--                <div style="float:left;margin-left:10px;margin-top:50px;">-->
<!--                    <button type="button" class="bt1 creat"></button>-->
<!--                </div>-->
<!--                <div style="float:left;margin-left:10px;margin-top:50px;margin-bottom:20px">-->
<!--                    <button type="button" class="bt2 del"></button>-->
<!--                </div>-->
<!--            </header>-->
            <div class="wrap" style="overflow-y:auto;width:280px;height:540px;">
                <div class="course-file" style="line-height: 40px;margin-left: 50px;" th:each="coures,couresSt:${courses}" th:courseId="${coures.courseId}" th:courseGroup="${coures.courseGroup}" th:uniId="${coures.uniId}">
                    <img style="height: 40px" src="/image/couese-file.png" alt="">
                    <span th:class="${couresSt.first}? 'select-file':''" style="font-size: 20px;font-family: QS-B" th:text="${coures.courseId}">SSK3408</span>
                </div>
            </div>
        </div>
        <h2 style="margin-left:400px;margin-top:40px;float:left;">
            <label>File name</label>
            <label>File type</label>
            <label>Time create</label>
        </h2>
        <button id="add-file" type="button" class="bt1" style="margin-top:42px;"></button>
        <hr style="color:gray;width:870px;margin-top:10px;margin-left:380px;border:1.5px solid #d9d9d9;">
        <div class="file-content" style="position: relative; width: 800px;height: 100px;    margin-left: 400px;">
            <div class="loading-bar" id="loading-bar" style="display:none;">
                <p>
                    <svg t="1642230754233" class="loading-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8715" id="mx_n_1642230754236" data-spm-anchor-id="a313x.7781069.0.i39" width="64" height="64"><path d="M512 337.322667a26.666667 26.666667 0 0 1-26.666667-26.666667V197.333333a26.666667 26.666667 0 1 1 53.333334 0v113.322667c0 14.762667-11.946667 26.666667-26.666667 26.666667z" fill="#707070" p-id="8716" data-spm-anchor-id="a313x.7781069.0.i49" class="selected"></path><path d="M424.661333 360.746667a26.666667 26.666667 0 0 1-36.394666-9.728l-56.661334-98.133334a26.666667 26.666667 0 0 1 46.122667-26.666666l56.661333 98.133333a26.624 26.624 0 0 1-9.728 36.394667z" fill="#707070" opacity=".9" p-id="8717" data-spm-anchor-id="a313x.7781069.0.i48" class="selected"></path><path d="M360.746667 424.661333a26.624 26.624 0 0 1-36.394667 9.728l-98.133333-56.661333a26.624 26.624 0 1 1 26.666666-46.122667l98.133334 56.661334c12.714667 7.338667 17.066667 23.68 9.728 36.394666z" fill="#707070" opacity=".85" p-id="8718" data-spm-anchor-id="a313x.7781069.0.i47" class=""></path><path d="M337.322667 512c0 14.72-11.946667 26.666667-26.666667 26.666667H197.333333a26.666667 26.666667 0 1 1 0-53.333334h113.322667c14.762667 0 26.666667 11.946667 26.666667 26.666667z" fill="#707070" opacity=".8" p-id="8719" data-spm-anchor-id="a313x.7781069.0.i46" class=""></path><path d="M360.746667 599.338667a26.666667 26.666667 0 0 1-9.728 36.394666l-98.133334 56.661334a26.666667 26.666667 0 0 1-26.666666-46.122667l98.133333-56.661333a26.624 26.624 0 0 1 36.394667 9.728z" fill="#8a8a8a" opacity=".75" p-id="8720" data-spm-anchor-id="a313x.7781069.0.i45" class=""></path><path d="M424.661333 663.253333a26.624 26.624 0 0 1 9.728 36.394667l-56.661333 98.133333a26.624 26.624 0 1 1-46.122667-26.666666l56.661334-98.133334a26.666667 26.666667 0 0 1 36.394666-9.728z" fill="#8a8a8a" opacity=".7" p-id="8721" data-spm-anchor-id="a313x.7781069.0.i44" class=""></path><path d="M512 686.677333c14.72 0 26.666667 11.946667 26.666667 26.666667v113.322667a26.666667 26.666667 0 1 1-53.333334 0v-113.322667c0-14.762667 11.946667-26.666667 26.666667-26.666667z" fill="#8a8a8a" opacity=".65" p-id="8722" data-spm-anchor-id="a313x.7781069.0.i43" class=""></path><path d="M599.338667 663.253333a26.666667 26.666667 0 0 1 36.394666 9.728l56.661334 98.133334a26.666667 26.666667 0 0 1-46.122667 26.666666l-56.661333-98.133333a26.624 26.624 0 0 1 9.728-36.394667z" fill="#8a8a8a" opacity=".6" p-id="8723" data-spm-anchor-id="a313x.7781069.0.i42" class=""></path><path d="M663.253333 599.338667a26.624 26.624 0 0 1 36.394667-9.728l98.133333 56.661333a26.624 26.624 0 1 1-26.666666 46.122667l-98.133334-56.661334a26.666667 26.666667 0 0 1-9.728-36.394666z" fill="#cdcdcd" opacity=".55" p-id="8724" data-spm-anchor-id="a313x.7781069.0.i41" class=""></path><path d="M686.677333 512c0-14.72 11.946667-26.666667 26.666667-26.666667h113.322667a26.666667 26.666667 0 1 1 0 53.333334h-113.322667a26.666667 26.666667 0 0 1-26.666667-26.666667z" fill="#cdcdcd" opacity=".5" p-id="8725" data-spm-anchor-id="a313x.7781069.0.i40" class=""></path><path d="M663.253333 424.661333a26.666667 26.666667 0 0 1 9.728-36.394666l98.133334-56.661334a26.666667 26.666667 0 0 1 26.666666 46.122667l-98.133333 56.661333a26.624 26.624 0 0 1-36.394667-9.728z" fill="#ffffff" opacity=".4" p-id="8726" data-spm-anchor-id="a313x.7781069.0.i38" class=""></path><path d="M599.338667 360.746667a26.624 26.624 0 0 1-9.728-36.394667l56.661333-98.133333a26.624 26.624 0 1 1 46.122667 26.666666l-56.661334 98.133334a26.666667 26.666667 0 0 1-36.394666 9.728z" fill="#ffffff" opacity=".3" p-id="8727" data-spm-anchor-id="a313x.7781069.0.i36" class=""></path></svg>
                </p>
                <p>
                    <span id="load-msg" style="color:white;font-size:14px">Loading</span>
                </p>

            </div>

        </div>
    </div>

</body>
<script>

    function getAllFile(){
        $(".row").remove();
        $("#loading-bar").show();
        let formData = new FormData();
        formData.append("courseGroup",$("#courseGroup").val());
        formData.append("courseId",$("#courseId").val());
        formData.append("uniId",$("#uniId").val());
        $.ajax({
            url:"/driver/query",
            method:"POST",
            data:formData,
            contentType:false,
            processData: false,
            success:function (data) {
                if (data.code===true){
                    let list = data.data;
                    for (let index=0;index<list.length;index++){
                        let file = list[index]
                        let ext = file.attachment.substr(file.attachment.lastIndexOf(".")+1)
                        let tem=`<div class="row">
                <div class="col-md-4" style="overflow: hidden;text-overflow: ellipsis; white-space: nowrap;">
                    <img style="width: 20px;vertical-align: middle;font-size: 0" src="/image/file.png" alt="">
                    <span><a style="display: inline" href="/course/download?addr=${file.uuid}&name=${file.attachment}&contentType=${file.contentType}">${file.attachment}</a></span>
                </div>
                <div class="col-md-3">${ext}</div>
                <div class="col-md-3">${file.uploadTime}</div>
                <div class="col-md-2">
                    <span class="delete-ico" fullPath="${file.uuid}" style="padding-left: 46px;"><img  style="display:inline;width: 20px;vertical-align: middle;font-size: 0"  src="/image/delete.png" alt=""></span>

                </div>
            </div>`
                        $(".file-content").append($(tem))
                    }
                    a()

                    $("#loading-bar").hide();
                }else {
                    $("#loading-bar").hide();
                    alert(data.errMsg);
                }
            }
        })

    }
    function a(){
        $(".delete-ico").click(function (event) {
           let fullPath = $(event.currentTarget).attr("fullPath");
            let formData = new FormData();
            formData.append("fullPath",fullPath);
            $.ajax({
                url:"/driver/delete",
                method:"POST",
                data:formData,
                contentType:false,
                processData: false,
                success:function (data) {
                    if (data.code===true){
                        $("#loading-bar").hide();
                        getAllFile()
                    }else {
                        $("#loading-bar").hide();
                        alert(data.errMsg);

                    }
                }
            })
        })

    }

    $(".course-file").click(function (event) {
        let currentEle = event.currentTarget;
        $("#courseId").val($(event.currentTarget).attr("courseId"))
        $("#uniId").val($(event.currentTarget).attr("uniId"))
        $("#courseGroup").val($(event.currentTarget).attr("courseGroup"))
        $(".select-file").attr("class","")
        $(currentEle).children().eq(1).attr("class","select-file")
        getAllFile()
    })
    $("#exampleInputFile").change(function () {
        $("#loading-bar").show();
        let formData = new FormData();
        formData.append("uploadUserId",$("#userId").val());
        formData.append("courseId",$("#courseId").val());
        formData.append("uniId",$("#uniId").val());
        formData.append("courseGroup",$("#courseGroup").val());
        formData.append("file",$("#exampleInputFile")[0].files[0]);
        $.ajax({
            url:"/driver/upload",
            method:"POST",
            data:formData,
            contentType:false,
            processData: false,
            success:function (data) {
                if (data.code===true){
                    $("#loading-bar").hide();
                    getAllFile()
                }else {
                    $("#loading-bar").hide();
                    alert(data.errMsg);

                }
            }
        })
    })

    $("#add-file").click(function () {
        $("#exampleInputFile").click()
    })
</script>
</html>